<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./art-template.js"></script>
</head>

<body>
  <script id="tpl-user" type="text/html">
    <h1>{{ logo }}</h1>
    <ul>
      {{each words}}
        <li>{{$index}} {{$value}}</li>
      {{/each}}
    </ul>

    {{if age>=18}}
      <p>已成年</p>
    {{else if age<18}}
      <p>未成年</p>
    {{/if}}

    <p>{{age | formatAge}}</p>

    <footer>{{time | formatTime}}</footer>
  </script>

  <script>
    template.defaults.imports.formatTime = function(timestamp){
      let timeObj = new Date(timestamp)
      let y = timeObj.getFullYear()
      let m = timeObj.getMonth() + 1
      let d = timeObj.getDate()
      return `${y}-${m}-${d}`
    };
    template.defaults.imports.formatAge = function(age){
      return age >=18 ? '已成年🌸' : '未成年🌞'
    };
    let data = { logo: 'itcast', words: ['a', 'b', 'c'], age: 16, time: 1652064275418 } // 2022-5-9
    // template()函数第一个参数是模版的id，第二个参数传递一个对象。注意data只能是对象
    let html = template('tpl-user', data);
    console.log(html);

  </script>
</body>

</html>